<template>
  <ContentBox class="ill-info" has-corner>
    <ContentBoxTitle title="疫情相关数据" />
    <div class="ill-info__content">
      <div class="ill-info__content__date">截至 {{ data.date }}</div>
      <div class="ill-info__content__list">
        <ValueText
          v-for="(item, index) of computedList"
          :class="'class-' + (index % 4)"
          :value="item.value"
          :text="item.text"
          :key="index"
        />
      </div>
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ContentBoxTitle from '@/components/ContentBoxTitle'
import ValueText from '@/components/ValueText'
export default {
  name: 'IllInfo',
  components: {
    ContentBox,
    ContentBoxTitle,
    ValueText
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    computedList () {
      return [{
        value: this.data.hanyangCount,
        text: '汉阳新增'
      }, {
        value: this.data.hubeiCount,
        text: '湖北新增'
      }, {
        value: this.data.domesticCount,
        text: '国内新增'
      }, {
        value: this.data.outsideCount,
        text: '境外输入'
      }]
    }
  }
}
</script>

<style lang="scss">
.ill-info {
  width: $base * 360px;
  height: $base * 230px;
  // margin-top: $base * 10px;

  .content-box-title__content {
    width: $base * 300px;
  }

  .ill-info__content {
    color: #fff;
    font-size: $base * 14px;
    padding-top: $base * 9px;
  }

  .ill-info__content__date {
    font-size: $base * 10px;
    text-align: right;
    padding-right: $base * 22px;
  }

  .ill-info__content__list {
    display: flex;
    margin-top: $base * 29px;
    .value-text {
      flex: 1;

      .value-text__text {
        margin-top: $base * 13px;
      }
    }
  }
  .class-0 {
    .value-text__value__value {
      color: $txt_c1;
    }
  }
  .class-1 {
    .value-text__value__value {
      color: $value_c;
    }
  }
  .class-2 {
    .value-text__value__value {
      color: $txt_c2;
    }
  }
  .class-3 {
    .value-text__value__value {
      color: $txt_c3;
    }
  }
}
</style>